<template>
  <view class="custom-uni-view" :style="{backgroundImage: 'url(' + bgImage +')'}">
    <view class="top">
      <view class="top-tab" :class="{active: type==2}" @click="changeCode(2)">
        <image :src="type == 2 ? '/static/image/qrcode/qrcode_pro_active.png' : '/static/image/qrcode/qrcode_pro.png'" mode="" class="img"></image>
        <view class="text1">推广码</view>
      </view>
      <view class="top-tab" :class="{active: type==3}" @click="changeCode(3)">
        <image :src="type == 3 ? '/static/image/qrcode/qrcode_zhaomu_active.png' : '/static/image/qrcode/qrcode_zhaomu.png'" mode="" class="img"></image>
        <view class="text1">店铺招募</view>
      </view>
      <view class="top-tab" :class="{active: type==1}" @click="changeCode(1)">
        <image :src="type == 1 ? '/static/image/qrcode/qrcode_shoukuan_active.png' : '/static/image/qrcode/qrcode_shoukuan.png'" mode="" class="img"></image>
        <view class="text1">收款码</view>
      </view>
    </view>
    <!-- 未有店铺  -->
    <block v-if="type == 1 && isHaveStore != 1">
      <view class="no-store">
        <image :src="$store.state.imgBaseUrl + '/storeNull.png'" mode="" class="no-store-img"></image>
        <view class="no-store-tip">
          <view class="">
            {{isHaveStore == -1 || isHaveStore == null ? '您尚未开通店铺' : isHaveStore == 0 ? '您的店铺正在审核中' : isHaveStore == 2 ? '您的店铺申请被驳回' : isHaveStore == 3 ? '您的店铺已下线' : isHaveStore == 4 ? '您的店铺审核已失败' : ''}}
          </view>
        </view>
        <button type="primary" class="no-store-btn" v-if="isHaveStore == -1 || isHaveStore == null || isHaveStore == 4 || isHaveStore == 2" @click="goToStore">
          {{isHaveStore == -1 || isHaveStore == null ? '去开通' : isHaveStore == 2 ? '去修改' : '重新申请'}}
        </button>
      </view>
    </block>
    <!--  -->
    <!-- 收款码 (店铺审核已经通过)-->
    <block v-if="type == 1 && isHaveStore == 1">
      <view class="content-box">
        <view class="content">
          <!-- 银联收款码 -->
          <block v-if="qrcodeType == 1">
            <!-- 未开通 -->
            <view class="no-open" v-if="isHaveStoreCollect != 5">
              <view class="no-open-content">
                <image src="/static/image/qrcode/excl.png" mode="" class="tip-img"></image>
                <view class="tip-desc">
                  {{isHaveStoreCollect == -1 || isHaveStoreCollect == null ? '银联收款码暂未开通' : isHaveStoreCollect == 0 ? '银联收款码暂未提交' : isHaveStoreCollect == 2 ? '银联收款码需补充资料！' : isHaveStoreCollect == 3 ? '银联收款码申请被驳回！' : isHaveStoreCollect == 4 ? '银联收款码补充资料审核中！' : isHaveStoreCollect == 1 ? '银联收款码待审核' : isHaveStoreCollect == 6 ? '协议资料审核驳回！' : isHaveStoreCollect == 7 ? '协议资料已提交至银联，等待审核中！' : ''}}
                </view>
                <button type="primary" class="tip-btn" @click="goToPage('/pages/qrCode/applyBank/step1')" v-if="isHaveStoreCollect == -1 || isHaveStoreCollect == null || isHaveStoreCollect == 0 || isHaveStoreCollect == 1 || isHaveStoreCollect == 4">
                  {{isHaveStoreCollect == -1 || isHaveStoreCollect == null ? '去开通' : isHaveStoreCollect == 0 ? '去提交' : isHaveStoreCollect == 3 ? '去修改！' : (isHaveStoreCollect == 1 || isHaveStoreCollect == 4 || isHaveStoreCollect == 7) ? '查看申请信息' : '去开通'}}
                </button>
                <button type="primary" class="tip-btn" @click="goToPage('/pages/qrCode/applyBank/success')" v-if="isHaveStoreCollect == 2">
                  去补充
                </button>
                <button type="primary" class="tip-btn" @click="goToPage('/pages/qrCode/applyBank/uploadFile')" v-if="isHaveStoreCollect == 6">
                  去补充
                </button>
              </view>
              <!-- <view class="operation-wrap" @click="checkRecord">
                <view class="left">查看收款记录</view>
                <view class="right">
                  <view class="arrow"></view>
                </view>
              </view> -->
            </view>
            <!--  -->
          </block>
          <!-- 银联收款码end -->
          <!-- 易生支付收款码 -->
          <block v-if="qrcodeType == 2">
            <!-- 未通过 -->
            <view class="no-open" v-if="isHaveEasypay != 6">
              <view class="no-open-content">
                <image src="/static/image/qrcode/excl.png" mode="" class="tip-img"></image>
                <view class="tip-desc">
                  {{isHaveEasypay == -1 || isHaveEasypay == null ? '易生支付收款码暂未开通' : isHaveEasypay == 0 ? '易生支付收款码待初审' : isHaveEasypay == 1 ? '易生收款码申请被驳回！' : isHaveEasypay == 2 ? '易生支付收款码待签约' : isHaveEasypay == 3 ? '易生支付收款码待终审' : isHaveEasypay == 4 ? '等待易生审核认证中……' : isHaveEasypay == 5 ? '易生收款码待终审失败' : ''}}
                </view>
                <button type="primary" class="tip-btn" @click="goToPage('/pages/qrCode/applyEasypay/step1')" v-if="isHaveEasypay != 5 && isHaveEasypay != 2">
                  {{isHaveEasypay == -1 || isHaveEasypay == null ? '去开通' : isHaveEasypay == 1 ? '去修改' : '查看申请信息'}}
                </button>
                <button type="primary" class="tip-btn" @click="goToPage('/pages/qrCode/applyEasypay/success')" v-if="isHaveEasypay == 2">
                  去签约
                </button>
              </view>
              <!-- <view class="operation-wrap" @click="checkRecord">
                <view class="left">查看收款记录</view>
                <view class="right">
                  <view class="arrow"></view>
                </view>
              </view> -->
            </view>
            <!-- 易生支付收款码end  -->
          </block>
          <!--  -->
          <block v-if="(isHaveEasypay === 6 && qrcodeType == 2) || (qrcodeType == 1 && isHaveStoreCollect === 5)">
            <view class="open-wrap">
              <view class="open">
                <view class="cont-tit">扫一扫 向我付钱</view>
                <view class="qrimg">
                  <tki-qrcode ref="bankqrcode" :val="val" unit="upx" :size="330" :onval="true" :loadMake="true" :showLoading="true" @result="qrR" v-if="qrcodeType == 1 && !bankQrcodeUrl"/>
                  <tki-qrcode ref="easyPayqrcode" :val="val" unit="upx" :size="330" :onval="true" :loadMake="true" :showLoading="true" @result="qrR" v-if="qrcodeType == 2 && !easyPayQrcodeUrl"/>
                  <image :src="bankQrcodeUrl" mode="" class="qr_img" v-if="qrcodeType == 1 && bankQrcodeUrl"></image>
                  <image :src="easyPayQrcodeUrl" mode="" class="qr_img" v-if="qrcodeType == 2 && easyPayQrcodeUrl"></image>
                </view>
              </view>
              <view class="cont-bot1" >
                <view @click="checkRecord">收款记录</view>
                <view @click="saveQrcode" v-if="(qrcodeType == 1 && bankQrcodeUrl) || (qrcodeType == 2 && easyPayQrcodeUrl)">收款码桌贴</view>
              </view> 
            </view>
          </block>
          
        </view>
        <picker @change="changePayType" style="width: 100%;" :value="qrcodeType-1" :range="bankList " range-key="name">
          <view class="pay_way_wrap">
              <view class="left">
                <image :src="'/static/image/qrcode/pay-'+qrcodeType+'.png'" mode="" class="img"></image>
                <view class="title">
                    <view class="uni-input textEllipsis" style="width: 176rpx;">{{bankList[(qrcodeType-1)].name}}</view>
                </view>
              </view>
              <view class="right">
                <view class="arrow"></view>
              </view>
          </view>
        </picker>
      </view>
    </block>
    <block v-if="type == 2">
      <view class="content">
        <!-- 付款码 -->
        <view class="cont">
          <block v-if="">
            <view class="cont-top">
              <!-- <view class="img"> -->
              <image :src="promoData.avatarUrl" mode="" class="img"></image>
              <!-- </view> -->
              <view class="text1">
                <view>{{promoData.nickName}}</view>
                <view>{{promoData.phone}}</view>
              </view>
            </view>
            <view class="cont-code">
              <image :src="promoData.qrCodeUrl" mode="" class="img"></image>
            </view>
            <view class="cont-bot2">
              邀请好友扫二维码
            </view>
          </block>
          
        </view>
        <!--  -->
      </view>
    </block>
    <block v-if="type == 3">
      <view class="freeStoreCont">
        <swiper class="card-swiper" :indicator-dots="false" :circular="true"
         :autoplay="false" interval="5000" duration="500" @change="cardSwiper"  indicator-color="#8799a3" indicator-active-color="#0081ff" v-if="listCount == swiperList.length">
          <swiper-item v-for="(item,index) in swiperList" :key="index" :class="curSwiperIndex==index?'cur':''">
            <view class="swiper-item">
               <image :src="item.qrcodeUrl" mode="aspectFit" v-if="item.qrcodeUrl" class="qrcode_img"></image>
            </view>
          </swiper-item>
        </swiper>
        <canvas :style="{width: '750rpx',height: '1334rpx'}" canvas-id="ceshiCanvas" class="canvas_class"></canvas>
        <tki-qrcode class="canvas_class" ref="qrcode" :val="inviteVal" :icon="icon" unit="upx" :size="260" :onval="true" :loadMake="true" :showLoading="false" @result="inviteQrR"/>
      </view>
    </block>
    <uni-popup ref="popup" type="center" :show="downloadModal.show" class="downloadModal" :maskClick="true">
      <view class="downloadModal_content">
        <qrcode :val="bankQrcodeUrl" canvasId="bankQrcodeCanvas" :type="qrcodeType" @updateQRCodeUrl="updateQRCodeUrl" ref="qrcode" v-if="!bankQrcodeFullUrl && qrcodeType == 1 && bankQrcodeUrl"></qrcode>
        <qrcode :val="easyPayQrcodeUrl" canvasId="easypayQrcodeCanvas" :type="qrcodeType" @updateQRCodeUrl="updateQRCodeUrl" ref="qrcode" v-if="!easyPayQrcodeFullUrl && qrcodeType == 2 && easyPayQrcodeUrl"></qrcode>
        <image :src="bankQrcodeFullUrl" mode="" class="qrcode" v-show="bankQrcodeFullUrl && qrcodeType == 1"></image>
        <image :src="easyPayQrcodeFullUrl" mode="" class="qrcode" v-show="easyPayQrcodeFullUrl && qrcodeType == 2"></image>
        <view class="downloadModal_tip">
          长按保存至相册
        </view>
      </view>
    </uni-popup>
    <!-- 易生收款对账 -->
    <view class="save_way_wrap" v-if="type == 1 && isHaveEasypay === 6 && qrcodeType == 2" @click="goToPage('/pages/qrCode/applyEasypay/accountChecking')">
      <view class="left">
        <image src="/static/image/qrcode/save.png" mode="" class="img"></image>
        <view class="title">
          易生收款对账
        </view>
      </view>
      <view class="right">
        <view class="arrow"></view>
      </view>
    </view>
    
    <common-free-store :isFreeStore="isFreeStore" @closeFreeStorePop="closeFreeStorePop"></common-free-store>
    <!-- <view class="view-foot" :style="{backgroundImage: 'url(' + bgImage +')'}"></view> -->
    <!-- <image src="/static/image/qrcode/bot-bg.png" class="view-foot"></image> -->
  </view>
</template>

<script>
import { getQrcodeInfoApi, getEasyPayInfoApi, getBankQrcodeApi, getPromQrcodeApi} from '@/service/qrCode/qrCode.service.js';
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import qrcode from './components/qrcode.vue'
import uniPopup from '@/components/uni-popup/components/uni-popup/uni-popup.vue'
import commonFreeStore from '@/components/common-freeStore/index.vue'
import { bannerFind } from "@/service/purchaseShop/purchaseShop.service.js"
var ctx = null;
export default {
  onReady () {
    ctx = uni.createCanvasContext('ceshiCanvas');
  },
  data() {
    return {
      bgImage: '/static/image/qrcode/bot-bg.png',
      downloadModal: {
        show: false,
        url: this.$store.state.imgBaseUrl + '/withdraw/gerenhetong.jpg'
      },
      val: '',
      type: 2,
      qrcodeType: 1, // 1: 银行收款码 2：易生收款码
      easyPayQrcodeUrl: '',
      bankQrcodeUrl: '',
      easyPayQrcodeFullUrl: '',
      bankQrcodeFullUrl: '',
      promoData: {
        avatarUrl: null,
        nickName: null,
        phone: null,
        qrCodeUrl: null
      },
      isFreeStore: false,
      myInfo: '',
      swiperList: [],
      curSwiperIndex: 0,
      invitePath: '',
      listCount: 0,
      icon: this.$store.state.imgBaseUrl + '/logo_small.png',
      bankList: [
        {type: 1, name: '银联支付'},
        {type: 2, name: '易生支付'}
      ]
    };
  },
  components: {
    tkiQrcode, qrcode, uniPopup, commonFreeStore
  },
  computed: {
    isHaveStore () {
      return this.$store.state.userInfo.isHaveStore; // 是否有店铺（-1未申请，0审核中，1审核通过，2驳回，3下线，4审核失败）
    },
    isHaveEasypay () {
      return this.$store.state.userInfo.isHaveEasypay; // 是否有易生收款码（-1未申请，0待初审,1驳回,2待签约,3待终审,4终审通过,5终审失败）,6、微信已认证
    },
    isHaveStoreCollect () {
      return this.$store.state.userInfo.isHaveStoreCollect; // 是否有银联收款码（-1未申请，0未提交,1待审核，2审核通过(未补充)，3驳回） ,4：审核通过（已补充）5：银联审核通过 6: 合同资料审核驳回  7: 合同资料审核通过
    },
    userInfo () {
      return this.$store.state.userInfo; // 是否是免费入驻商户 
    },
    inviteVal () {
      let url = window.location.origin + '/pages/freeStore/login';
      return `${url}?inviteId=${this.$store.state.userInfo.userId}`;
    }
  },
  watch: {
    isHaveEasypay (newVal, oldVal) {
      if (newVal == 6 && this.qrcodeType == 2) {
        this.getQrcodeInfo();
      }
    },
    isHaveStoreCollect (newVal, oldVal) {
      if (newVal == 5 && this.qrcodeType == 1) {
        this.getQrcodeInfo();
      }
    }
  },
  methods: {
    inviteQrR (path) {
      if (!this.invitePath) {
        // let _it = this;
        this.invitePath = path;
        this.getBanner(path);
        // setTimeout(() => {
        //   uni.downloadFile({
        //     url: path,//网络路径
        //     success: function (res) {
        //       _it.invitePath = res.tempFilePath;
        //       _it.getBanner();  
        //     }
        //   });
        // },1000)
      }
    },
    getBanner (path) {
      if (this.swiperList.length == 0) {
        // let _it = this;
        // uni.downloadFile({
        //   url: path,//网络路径
        //   success: function (res) {
        //     _it.invitePath = res.tempFilePath;
        //   }
        // });
        bannerFind({id: 8}, (res) => {
          this.swiperList = res.data;
          this.drawCanvas(res.data[0]);
        })
      }
    },
    cardSwiper (e) {
      this.curSwiperIndex = e.detail.current;
    },
    reCreate () {      
      if (this.listCount == this.swiperList.length) {
        uni.hideLoading();
        return;
      }
      ctx.clearRect(0, 0, uni.upx2px(750), uni.upx2px(1334));
      this.drawCanvas(this.swiperList[this.listCount]);
    },
    drawCanvas (data) {
      uni.showLoading({
        title: '海报生成中',
        mask: true
      })
      let that = this;
      uni.downloadFile({
        url: data.imageUrl,//网络路径
        success: function (res) {
          ctx.drawImage(res.tempFilePath, 0, 0, uni.upx2px(750), uni.upx2px(1334));
          ctx.drawImage(that.invitePath, uni.upx2px(262), uni.upx2px(740), uni.upx2px(230), uni.upx2px(230))
          // ctx.restore();
          setTimeout(res => {
            ctx.draw(true, function () {
              uni.canvasToTempFilePath({
                canvasId: 'ceshiCanvas',
                success (res2) {
                  that.$set(that.swiperList[that.listCount], 'qrcodeUrl', res2.tempFilePath)
                  that.listCount++;
                  that.reCreate();
                },
                fail (res) {
                  uni.showToast({
                    title: '生成二维码失败',
                    icon: 'none'
                  })
                },
              })
            });
          }, 1000)
        }
      });
    },
    closeFreeStorePop () {
      this.type = 3;
      this.isFreeStore = false;
    },
    qrR (path) {
      if (path == '') {
        uni.showToast({
          title: '生成失败，请重试',
          icon: 'none'
        });
        return;
      }
      if (this.qrcodeType == 1) {
        this.bankQrcodeUrl = path;
      } else {
        this.easyPayQrcodeUrl = path;
      }
    },
    updateQRCodeUrl (obj) {
      if (obj.type == 1) {
        this.bankQrcodeFullUrl = obj.url;
      } else {
        this.easyPayQrcodeFullUrl = obj.url;
      }
    },
    goToStore () {
      let url = this.isHaveStore == 2 ? '/pages/storeManage/index?status=2' : '/pages/storeManage/index';
      uni.navigateTo({
        url: url
      })
    },
    checkRecord () {
      uni.navigateTo({
        url: '/pages/gatheringRecord/index'
      })
    },
    goToPage (url) {
      uni.navigateTo({
        url: url
      })
    },
    saveQrcode () {
      this.$refs.popup.open();
      // this.$refs.qrcode.saveFile();
    },
    creatQrcode() {
      // this.$refs.qrcode._makeCode();
    },
    changePayType (e) { // 改变支付方式
      console.log(e.target.value, '99999')
      this.qrcodeType = e.target.value + 1;
      // this.qrcodeType = JSON.parse(JSON.stringify(this.qrcodeType)) == 1 ? 2 : 1;
      if ((this.qrcodeType == 1 && this.isHaveStoreCollect == 5 && !this.bankQrcodeUrl) || (this.qrcodeType == 2 && this.isHaveEasypay == 6 && !this.easyPayQrcodeUrl)) {
        this.getQrcodeInfo();
      }
    },
    changeCode (t) {
      this.type = t;
      if (t == 3) {
        uni.showLoading({
          title: '海报生成中',
          mask: true
        })
        this.curSwiperIndex = 0;
      } else if (t == 2) {
        if (this.userInfo.rank < 2 && this.userInfo.freeStore) {
          this.isFreeStore = true;
        }
        if (!this.promoData.qrCodeUrl) {
          this.getPromQrcode();
        }
      } else if (t == 1) {
        if ((this.qrcodeType == 1 && this.isHaveStoreCollect == 5 && !this.bankQrcodeUrl) || (this.qrcodeType == 2 && this.isHaveEasypay == 6 && !this.easyPayQrcodeUrl)) {
          this.getQrcodeInfo();
        }
      }
    },
    getQrcodeInfo (opt) { // 获取二维码信息
      getQrcodeInfoApi({
        id: this.qrcodeType == 1 ? 0 : 1
      }, (res) => {
        if (res.status !== 0) {
          uni.showToast({
            title: res.msg,
            icon: "none"
          })
        } else {
          // if (this.qrcodeType == 1) {
          //   this.bankQrcodeUrl = res.data.storeCollectUrl;
          // } else if (this.qrcodeType == 2) {
          //   this.easyPayQrcodeUrl = res.data.storeCollectUrl;
          // }
          this.val = res.data.storeCollectUrl;
        }
      });
    },
    getPromQrcode () { // 获取推广码相关信息
      getPromQrcodeApi({}, res=> {
        if (res.status == 0 && res.data) {
          this.promoData = res.data;
        }
      });
    }
  },
  onShow () {
    if (this.$store.state.userInfo.rank < 2 && this.$store.state.userInfo.freeStore) {
      this.isFreeStore = true;
    }
    if ((this.qrcodeType == 1 && this.isHaveStoreCollect == 5) || (this.qrcodeType == 2 && this.isHaveEasypay == 6)) {
      this.getQrcodeInfo();
    }
    
  },
  onLoad (option) {
    this.qrcodeType = option.qrcodeType || 1; 
    this.getPromQrcode();
  }
}
</script>

<style lang="scss" scoped>
@import "../../colorui/main.css";
@import "../../colorui/icon.css";
.content-box {
  width: 650rpx;
  background: rgba(62,63,88,1);
  border-radius: 16rpx;
  margin: 0 auto;
}
.custom-uni-view {
  position: relative;
  min-height: 100vh;
  background-color: #28293F;
  background-repeat: no-repeat;
  background-size: 100% 178rpx;
  background-position-y: bottom;
  .qrcode {
    width: 530rpx;
    height: 790rpx;
  }
  .no-store {
    margin-top: 140rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .no-store-img {
      width: 340rpx;
      height: 340rpx;
    }
    .no-store-tip {
      margin-top: 16rpx;
      font-size: 38rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #FFFFFF;
      text-align: center;
    }
    .no-store-btn {
      margin-top: 50rpx;
      background-color: #434343;
      color: #F6DA99;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 500;
    }
  }
  .content {
    background-color: #FFFFFF;
    width: 560rpx;
    margin: 48rpx auto 0;
    border-radius: 16rpx;
    .no-open {
      .no-open-content {
        // width: 270rpx;
        margin: 0 auto;
        padding-top: 136rpx;
        padding-bottom: 116rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .tip-img {
          width: 130rpx;
          height: 130rpx;
        }
        .tip-desc {
          margin-top: 70rpx;
          font-size: 32rpx;
          font-weight:bold;
          color: #999999;
          text-align: center;
          padding: 0 40rpx;
        }
        .tip-btn {
          margin: 54rpx 0 0 0;
          background-color: #434343;
          height: 66rpx;
          width: 270rpx;
          border-radius: 10rpx;
          color: #F6DA99;
          font-size: 26rpx;
        }
      }
      .operation-wrap {
        height: 100rpx;
        margin: 0 26rpx;
        border-top: 2rpx solid #EEEEEE;
        display: flex;
        justify-content: space-between;
        
        align-items: center;
        .left {
          color: #333333;
          font-size: 28rpx;
        }
      }
    }
    
    .open-wrap {
      position: relative;
      .open {
        .qrimg {
          margin: 0 auto;
          width: 440rpx;
          height: 440rpx;
          .qr_img {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  
  .pay_way_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 26rpx;
    padding: 0 42rpx 38rpx 44rpx;
    .left {
      display: flex;
      align-items: center;
      margin-left: 22rpx;
      .img {
        width: 36rpx;
        height: 36rpx;
      }
      .title {
        margin-left: 16rpx;
        color: #FFFFFF;
        font-size: 28rpx;
        font-weight:500;
      }
    }
    .right {
      margin-right: 22rpx;
      .arrow {
        border-color: #FFFFFF;
        border-left: 1px solid transparent;
        border-bottom: 1px solid transparent;
      }
    }
  }
  
  .save_way_wrap {
    width: 650rpx;
    height: 88rpx;
    border-radius: 16rpx;
    background-color: #3E3F58;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30rpx auto 0;
    border-radius:16rpx;
    // padding: 28rpx 56rpx 28rpx 46rpx;
    padding-left: 44rpx;
    padding-right: 56rpx;
    .left {
      display: flex;
      align-items: center;
      margin-left: 22rpx;
      .img {
        width: 36rpx;
        height: 36rpx;
      }
      .title {
        margin-left: 18rpx;
        color: #FFFFFF;
        font-size: 28rpx;
        font-weight:500;
      }
    }
    .right {
      .arrow {
        border-color: #FFFFFF;
        border-left: 1px solid transparent;
        border-bottom: 1px solid transparent;
      }
    }
  }
  
  .tit {
    padding-top: 75rpx;
    color: #FFFFFF;
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 65rpx;
    text-align: center;
  }
  .cont {
    background-color: #FFFFFF;
    padding: 48rpx 0 60rpx;
    border-radius: 16rpx;
    position: relative;
    &-tit {
      font-size: 36rpx;
      color: #333333;
      font-weight: bold;
      text-align: center;
      padding: 56rpx 0 40rpx;
      font-family: PingFangSC-Regular,PingFang SC;
    }
    &-top {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0 60rpx 0;
      .img {
        width: 96rpx;
        height: 96rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
      }
      .text1 {
        color: #999999;
        font-size: 32rpx;
        font-family: PingFangSC-Regular,PingFang SC;
        font-weight: 400;
        line-height: 48rpx;
        view:first-of-type {
          font-size: 36rpx;
          font-family: PingFangSC-Medium,PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
    }
    &-code {
      width: 560rpx;
      height: 560rpx;
      .img {
        width: 100%;
        height: 100%;
      }
    }
    &-bot1 {
      font-size: 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family:PingFangSC-Regular,PingFang SC;
      color: #C2AC78;
      padding: 36rpx 60rpx 66rpx 62rpx;
    }
    &-bot2 {
      font-size: 32rpx;
      font-family: PingFangSC-Regular,PingFang SC;
      text-align: center;
      color: #333333;
      margin: auto;
      position: absolute;
      bottom: 60rpx;
      left: 0;right: 0;
    }
  }
  .top {
    padding: 42rpx 0 0 0;
    color: #FFFFFF;
    display: flex;
    width: 530rpx;
    margin: 0 auto;
    justify-content: space-between;
    .top-tab {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      font-size: 26rpx;
      .text1 {
        font-size: 26rpx;
        margin-top: 13rpx;
      }
      .img {
        width: 70rpx;
        height: 70rpx;
      }
      &.active {
        color: #C2AC78;
      }
    }
  }
  
  .arrow {
    // margin-right: 33rpx;
    border-right: 3rpx solid #8A8A8A;
    border-top: 3rpx solid #8A8A8A;
    height: 14rpx;
    width: 14rpx;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    /*不加这两个属性三角会比上一个略丑, 大家可以试一下*/
    border-left: 2rpx solid transparent;
    border-bottom: 2rpx solid transparent;
  }
  
  .downloadModal {
    .downloadModal_content {
      display: flex;
      flex-flow: column;
      justify-content: center;
      opacity: 1;
      // .downloadModal_img {
      //   width: 520rpx;
      //   height: 736rpx;
      // }
      .downloadModal_tip {
        font-size: 28rpx;
        color: #999999;
        text-align: center;
        // border-top: 2rpx solid #999999;
        padding-top: 20rpx;
      }
    }
  }
}
.freeStoreCont {
  width: 750rpx;
  height: calc(100vh - 240rpx);
  margin-top: 42rpx;
}
.card-swiper {
  height: 100% !important;
  uni-swiper-item {
    padding: 0;
  }
  .swiper-item image {
    pointer-events: all !important;
  }
}
 .canvas_class {
    position: fixed;
    top: -99999upx;
    left: -99999upx;
    z-index: -99999;
  }
</style>
